<!DOCTYPE  html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${detail.title}"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 400;
            font-size: 16px;
        }

        .title {
            margin-bottom: 10px;
            line-height: 1.4;
            font-weight: 400;
            font-size: 24px;
        }

        .author {
            position: relative;
            z-index: 1;
            margin-bottom: 18px;
            line-height: 20px;
            font-size: 0;
        }

        .tag {
            font-size: 13px !important;

        }

        .text {
            color: #8c8c8c;
        }

        p {
            font-size: 14px;
            line-height: 2.0;
            letter-spacing: 0.2px;
            margin: 1.5em 0;
        }

        .meta {
            display: inline-block;
            vertical-align: middle;
            margin-right: 8px;
            margin-bottom: 10px;
            font-size: 16px;
        }

        .nickname {
            display: inline-block !important;
        }

        .content_list {
            margin-bottom: 18px;
            line-height: 20px;
            font-size: 0;
        }

        .area_primary {
            position: relative;
            padding: 20px 15px 15px;
            background-color: #fff;
        }

        .main img {
            max-width: 100% !important;
            vertical-align: middle;
            margin: auto;
            display: block;
            border: .2em solid #ececec;
            padding: 2px;
            border-radius: 10px;
        }

        /* ===================== 响应 ========================= */

        @media screen and (min-width: 1025px) {
            .main {
                position: relative;
                padding-bottom: 100px;
            }
        }

        @media screen and (min-width: 1024px) {
            .main {
                width: 740px;
                margin-left: auto;
                margin-right: auto;
            }

            .title {
                padding-bottom: 10px;
                margin-bottom: 14px;
                border-bottom: 1px solid #e7e7eb;
            }

            .area_primary {
                padding: 20px;
            }
        }
    </style>

</head>
<body>

<div class="main">
    <div class="area_primary">
        <!-- 文章：标题 -->
        <h2 class="title" th:text="${detail.title}"></h2>

        <!-- 文章：日期 - 作者 - 标签 -->
        <div class="author">
            <em class="meta text createTime" th:text="${detail.createTime}"></em>
            <span class="nickname meta" th:text="${detail.author}"></span>
            <span class="meta tag text" th:each="tag,tagStat: ${detail.articleTags}"
                  th:utext="'<i class=am-icon-tags></i>'+${tag}">
            </span>
        </div>

        <!-- 文章：内容 -->
        <div id="content" class="content_list" th:utext="${detail.contentDetail}">

        </div>
    </div>
</div>
</body>
</html>